<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>treeView</title>
		<style>
			h1,h2,h3,h4 {
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="treeView">
			<h1>web前端学习路线</h1>
			<ul>
				<li v-for="(root,level1) in treeNode">
					<h2 @click="showTwoLevelChildList($event)" :data-level1="level1" data-currentlevel="2">{{root.title}}</h2>
					<ul v-if="treeIsOpen[level1].open">
						<li v-for="(twoLevel,level2) in root.children">
							<h3 @click="showTreeLevelChildList($event)" :data-level1="level1" :data-level2="level2" data-currentlevel="3">{{twoLevel.title}}</h3>
							<ul v-if="treeIsOpen[level1].next[level2].open">
								<li v-for="(threeLevel,level3) in twoLevel.children">
									<h4>{{threeLevel.title}}</h4>
								</li>
								<h4 @click="addThreeLevelChildNode($event)" :data-level1="level1" :data-level2="level2">{+}</h4>
							</ul>
						</li>
						<h3 @click="addTwoLevelChildNode($event)" :data-level1="level1">{+}</h3>
					</ul>
				</li>
				<h2 @click="addChildNode()">{+}</h2>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el: '#treeView',
				data() {
					return {
						treeNode: [{
							title: '前端学习',
							children: [{
								title: 'HTML5',
								children: []
							}, {
								title: 'CSS3',
								children: []
							}, {
								title: 'JavaScript',
								children:[]
							}]
						}, {
							title: '前端UI框架',
							children: [{
								title: 'Bootstrap',
								children:[]
							}, {
								title: 'Layui',
								children:[]
							}, {
								title: 'IView',
								children:[]
							}, {
								title: 'ElementUI',
								children:[]
							}]
						}, {
							title: '前端JS框架',
							children: [{
								title: 'Vue.js',
								children:[]
							}, {
								title: 'Angular.js',
								children:[]
							}, {
								title: 'React.js',
								children:[]
							}]
						}],
						//控制树节点的开关
						treeIsOpen: [{
							open: false,
							next: [{
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}]
						}, {
							open: false,
							next: [{
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}]
						}, {
							open: false,
							next: [{
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}, {
								open: false,
								next:[]
							}]
						}],

					}
				},
				methods: {
					//控制展示二级菜单
					showTwoLevelChildList(e) {
						let {
							level1,
							currentlevel
						} = e.target.dataset
						level1 = Number.parseInt(level1)
						let {
							open
						} = this.treeIsOpen[level1]
						open = !open
						if (open) {
							console.log("打开第" + (level1 + 1) + "个" + currentlevel + "级菜单")
						} else {
							console.log("关闭第" + (level1 + 1) + "个" + currentlevel + "级菜单")
						}
						this.treeIsOpen[level1].open=open
					},
					//控制展示三级菜单
					showTreeLevelChildList(e){
						let {
							level1,
							level2,
							currentlevel
						}=e.target.dataset
						let {
							open
						} = this.treeIsOpen[level1].next[level2]
						level1 = Number.parseInt(level1)
						level2 = Number.parseInt(level2)
						open=!open
						this.treeIsOpen[level1].next[level2].open=open
					},
					//添加一级节点
					addChildNode(){
						let title=prompt()
						console.log(title)
						if(title!=null){
							this.treeIsOpen.push({
								open:false,
								next:[]
							})
							this.treeNode.push({
								title,
								children:[]
							})
						}
					},
					//添加二级节点
					addTwoLevelChildNode(e){
						let title=prompt()
						let {
							level1,
						}=e.target.dataset
						if(title!=null){
							this.treeIsOpen[level1].next.push({
								open:false,
								next:[],
							})
							this.treeNode[level1].children.push({
								title,
								children:[]
							})
						}
					},
					//添加三级节点
					addThreeLevelChildNode(e){
						let title=prompt()
						let {
							level1,
							level2
						}=e.target.dataset
						if(title!=null){
							this.treeIsOpen[level1].next[level2].next.push({
								open:false,
								next:[],
							})
							this.treeNode[level1].children[level2].children.push({
								title,
								children:[]
							})
						}
					}
				}
			})
		</script>
	</body>
</html>
